<template>
	<!-- 做一个导航栏组件搜索00 -->
	<!-- 有定位还要有占位效果 -->
	<view class="nav-bar">
		<view class="nav-bar-top">
			<view :style="{height:statusHeight +'rpx'}">
				<!-- 默认占位楼上 -->
				
			</view>
			<view @click="goToSearchPage" class="nav-bar-content" :style="{ marginRight: marginRight+'rpx'}">
				<uni-icons type="search" size="30" color="#999"></uni-icons>

					
					
				
				<view class="nav-bar-search-txt">
					输入标题
				</view>
			</view>
		</view>	
		<!-- //底部垫片，动态设置高度，占一个位置， -->
		<view :style="{height:statusHeight+80+'rpx'}">
		
			
		</view>
	</view>

	
</template>

<script>
export default {
  name: "NavBar",
  created() {
    this.getSystemInfo();
  },
  data() {
    return {
      statusHeight: 20 ,// 设置默认高度,因为导航栏不知道有多高,如果没有就默认值
	  marginRight:0
    };
  },
  methods: {
    getSystemInfo() {
      const s = uni.getSystemInfoSync();
      console.log(s);
      console.log('11111');
      // 成二的原因是小程序是rpx默认小一倍
      if (s.statusBarHeight) {
        this.statusHeight = s.statusBarHeight * 2;
      }
      console.log(this.statusHeight);
      console.log(s.statusBarHeight);

      // #ifdef MP-WEIXIN
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 这个方法获取胶囊的值
      this.statusHeight = menuButtonInfo.top * 2;
		this.marginRight=menuButtonInfo.width*2;//使得栏板框可以兼容不会挡道胶囊
      console.log('menuButtonInfo');
      console.log(menuButtonInfo);
      // 跟胶囊距离顶部对齐
      // #endif
    },
    goToSearchPage() {
      // 跳转到搜索页面的逻辑
      uni.navigateTo({
        url: '/pages/search/search'  // 修改为你的搜索页面路径
      });
    },
    InputFocus() {
      // 输入框聚焦时的逻辑（如果需要）
    },
    InputBlur() {
      // 输入框失去焦点时的逻辑（如果需要）
    }
  }
}
</script>
<style lang="scss">
	@import './NavBar.scss';
	@import '../../uni.scss';
	  
	
	
	
</style>

